<script setup>
import { ref } from "vue";

// 模拟数据
let footerList=ref([
  { title:'书城', icon:'icon iconfont icon-side_red_cl',path:"/index"},
  { title:'社区', icon:'icon iconfont icon-shequ-active',path:"/community"},
  { title:'福利', icon:'icon iconfont icon-fuli',path:"/welfare"},
  { title:'我的', icon:'icon iconfont icon-wodedamaijihuo',path:"/my"}
])

</script>

<template>
  <div class="footer">
    <div class="footer-seat">
      <div class="footer-list">
        <ul>

          <!-- 遍历数据 -->
          <li v-for="(v,index) in footerList" :key="index">
            <router-link :to="v.path" >
              <i :class="v.icon"></i>
              <p>{{ v.title }}</p>
            </router-link>
          </li>


        </ul>
      </div>
    </div>
  </div>
</template>

<style>
/* 底部样式 */
.footer {
  height: 60px;
}

.footer-seat {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  border-top: 1px solid #eee;
  background-color:#eee;
  height: 60px;
}

.footer-list {
  max-width: 1080px;
  margin: auto;
  padding-top: 6px;
}

.footer-list ul {
  display: flex;
  list-style-type: none;
  justify-content:space-around;
  height: 100%;
  margin: 0px;
  padding: 0px;
}

.footer-list ul i{
 font-size: 22px;
}

.footer-list ul li p{
  margin-top: -2px;
  font-size: 13px;
}
</style>
